<template>
  <div class="btnWrap">
    <div
      v-for="item in props.tagBtnNameArr"
      :key="item"
      :class="active === item ? 'active tabBtn' : 'tabBtn'"
      @click="btnClick(item)"
    >
      {{ item }}
    </div>
  </div>
</template>
<script setup>
import { ref } from "vue";
// 父组件传的值  默认  是以下
const props = defineProps({
  tagBtnNameArr: {
    type: Array,
    default: () => ["基本信息", "审核日志", "关联点位小时值"],
  },
});
// 选中的 信号量
let active = ref("基本信息");

// 方法
const emits = defineEmits("tabFn");

// 点击事件
const btnClick = val => {
  active.value = val;
  emits("tabFn", val);
};
</script>
<style lang="scss">
.btnWrap {
  .tabBtn {
    display: inline-block;
    margin-right: 20px;
    padding: 5px 10px 10px;
    font-size: 14px;
    cursor: pointer;
  }
  .active {
    color: #2780fb;
    position: relative;
    font-weight: 400;
  }
  .active::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 4px;
    background-color: #2780fb;
    border-radius: 2px;
    left: 0;
    bottom: 0;
  }
}
</style>
